<template>
	<view  style="display: flex;flex-wrap: wrap;background-color: #efefef;padding: 10px;justify-content: center;width: 835px;">
		<view  v-for="(item, index) in tableData" :key="index"  @click="selectGrid(index)"  style="width: calc(21.33% - 10px);position: relative;margin: 22px;display: flex;justify-content: center;">
			<view  v-if="item.subject == '充值金豆'" style="background-color: #fff;border: 1px solid rgb(204, 204, 204); 0;padding: 10px;border-radius: 9px;" :class="{ 'selected': selectedIndex === index }">
				<view  style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
					<view class="badge-container" style="position: absolute;top: 0;right: 6px;background-color: #ea7d23;">
						<view  style="color: #fff;padding: 1px 5px;font-size: 13px;">
							{{item.jiaobiao}}
						</view>
					</view>
					<view style="border-bottom: 1px solid #e5e5e5;width: 134px;margin: 10px 0;">
						<view  style="display: flex;margin-top: 14px;">
							<view  style="width: 24px;height: 24px;">
								<image style="width: 24px;height: 24px;" src="@/static/金币.png" mode=""></image>
							</view>
							<view  style="font-weight: 700;font-size: 19px;margin-left: 6px;">
								{{item.bean}} 金豆
							</view>
						</view>
						<view style="color: #e57a7a;margin-top: 5px;display: flex;justify-content: center;padding-bottom: 15px;height: 20px;">
							{{item.recharge_text}}
						</view>
					</view>
					
					<view :class="{ 'selecteddd': item.judge }">
						
					</view>
				
					
					<view style="display: flex;justify-content: center;"  :class="{ 'selectedd': item.judge }">
						￥ {{item.recharge_amount/100}}.00
					</view>
				</view>
			</view>
			
			<view  v-else style="border-radius: 9px;background-color: #fee0b7;border: 1px solid rgb(204, 204, 204); 0;padding: 10px;" :class="{ 'selected': selectedIndex === index }">
				<view  style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
					<view class="badge-container" style="position: absolute;top: 0;right: 6px;background-color: #ea7d23;">
						<view  style="color: #fff;padding: 1px 5px;font-size: 13px;">
							{{item.jiaobiao}}
						</view>
					</view>
					<view style="border-bottom: 1px solid #e5e5e5;width: 134px;margin: 10px 0;">
						<view  style="display: flex;margin-top: 12px;justify-content: center;">
							<!-- <view  style="width: 24px;height: 24px;">
								<image style="width: 24px;height: 24px;" src="../../static/金豆.png" mode=""></image>
							</view> -->
							<view style="font-weight: 700;font-size: 19px;margin-left: 6px;">
								{{item.bean}} 
							</view>
						</view>
						<view style="margin-top: 5px;display: flex;justify-content: center;padding-bottom: 15px;">
							{{item.recharge_text}}
						</view>
					</view>
					
					<view  :class="{ 'selecteddd': item.judge }">
						
					</view>
				
					
					<view style="display: flex;justify-content: center;"  :class="{ 'selectedd': item.judge }">
						￥ {{item.recharge_amount/100}}.00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [{
						id: 0,
						bean: 9900,
						recharge_amount: 6900,
						recharge_text: '多送30元',
						jiaobiao: '优惠1',
						judge:true,
						subject:'充值金豆'
					},
					{
						id: 0,
						bean: 9900,
						recharge_amount: 6900,
						recharge_text: '',
						jiaobiao: '优惠',
						judge:false,
						subject:'充值金豆'
					},
					{
						id: 0,
						bean: 9900,
						recharge_amount: 6900,
						recharge_text: '多送30元',
						jiaobiao: '优惠',
						judge:true,
						subject:'充值金豆'
					},
					{
						id: 0,
						bean: 9900,
						recharge_amount: 6900,
						recharge_text: '多送30元',
						jiaobiao: '优惠',
						judge:false,
						subject:'充值金豆'
					},
					{
						id: 0,
						bean: 9900,
						recharge_amount: 6900,
						recharge_text: '多送30元',
						jiaobiao: '优惠',
						judge:false,
						subject:'充值金豆'
					},
					
					{
						id: 0,
						bean: 'vip会员',
						recharge_amount: 36500,
						recharge_text: '全部剧免费看',
						jiaobiao: '每日1元',
						judge:false,
						subject:'月度会员'
					}
				],
				selectedIndex: 0 // 选中的宫格索引
			};
			
		},
		
		 methods: {
		      selectGrid(index) {
		        this.selectedIndex = index; // 设置选中的宫格索引
		        const selectedGrid = this.gridData[index]; // 获取选中的宫格信息
		        console.log(selectedGrid); // 打印选中的宫格信息
		      }
		    }
	};
</script>

<style>
		
	.selecteddd{
		    background-color: #ea7d23;
		    height: 43px;
		    top: -11px;
		    position: relative;
		    width: 116%;
		    left: -11px;
		    z-index: 0;
		    border-bottom-left-radius: 12px;
		    border-bottom-right-radius: 11px;
	}
	.selected {
	    border-color: #ff0000 !important; /* 选中宫格的边框颜色 */
	  
	  }
	  .selectedd {
		     display: flex;
		     justify-content: center;
		     z-index: 1;
		     margin-top: -43px;
			 color: #fff;
	    }

</style>